<template>
    <div class="page animate__animated animate__fadeIn">
        <!-- <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px 0' }">
            <el-form size="small" inline label-position="right">
                <el-form-item label="手机号">
                    <el-input v-model="searchForm.keyword" placeholder="请输入手机号搜索" clearable @clear="reload"></el-input>
                </el-form-item>
                <el-form-item label="是否接单">
                    <el-select v-model="searchForm.delivery_status" placeholder="请选择">
                        <el-option label="配送中" value="20">
                        </el-option>
                        <el-option label="空闲" value="10">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="reload">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" size="small" icon="el-icon-plus" @click="addDriver()">新增</el-button>
                </el-form-item>
            </el-form>
        </el-card> -->
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px' }">
            <el-button type="success" size="small" icon="el-icon-plus" @click="add">新增</el-button>
            <el-table v-loading="isLoading" size="small" header-cell-class-name="table_header_cell" :data="list" class="table-mt">
                <!-- <el-table-column prop="supply_address_id" label="ID">
                </el-table-column> -->
                <el-table-column prop="xuhao" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="name" label="联系人">
                </el-table-column>
                <el-table-column prop="phone" label="联系电话">
                </el-table-column>
                <el-table-column prop="address_detail" label="地址" width="300px">
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="edit(scope.row.supply_address_id)">编辑</el-button>
                        <el-button type="text" @click="del(scope.row.supply_address_id)">删除</el-button>
                    </template>
                </el-table-column>
                <div slot="empty" class="empty">
                    <el-empty description="暂无数据" />
                </div>
            </el-table>
            <pagination v-if="total" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.limits" @pagination="getList" />
        </el-card>
        <add-address ref="address" @reload="reload"></add-address>
    </div>
</template>
<script>
import { addrList,detailAddr,addrRemove } from '../../api/setting';
import addAddress from './components/addAddress.vue';
export default {
    components: { addAddress },
    data() {
        return {
            searchForm: {
                keyword: '',
                delivery_status: '',
                page: 1,
                limits: 15,
            },
            isLoading: false,
            total: 0,
            list: [],
        }
    },
    created() {
        this.isLoading = true;
        this.getList()
    },
    methods: {
        reload() {
            this.isLoading = true;
            this.searchForm.page = 1;
            this.list = [];
            this.getList();
        },
        add() {
            this.$refs.address.title = '添加地址'
            this.$refs.address.add();
        },
        edit(id) {
            this.$refs.address.add();
            this.$refs.address.ruleForm.address_id = id;
            this.$refs.address.title = '编辑地址';
            this.$refs.address.loading = true;
            detailAddr({
                address_id: id
            }).then(res => {
                this.$refs.address.loading = false;
                if (res.code == 0) {
                    this.$refs.address.ruleForm.name = res.data.name;
                    this.$refs.address.ruleForm.phone = res.data.phone;
                    this.$refs.address.ruleForm.detail = res.data.detail;
                    this.$refs.address.ruleForm.province_id = res.data.province_id;
                    this.$refs.address.ruleForm.city_id = res.data.city_id;
                    this.$refs.address.ruleForm.region_id = res.data.region_id;
                }
            })
        },
        del(id){
            const that = this;
            this.$confirm('确定删除此地址?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                addrRemove({
                    address_id: id
                }).then(res => {
                    if (res.code == 0) {
                        that.$message.success(res.msg);
                        that.getList()
                    }
                })
            })
        },
        toSettingPage(row) {
            this.$router.push(`/driver/contract/list/${row.driver_id}`)
        },
        resetPwd(id) {
            this.$refs.editPwd.add();
            this.$refs.editPwd.ruleForm.driver_id = id;
        },
        setStatus(id, e) {
            setDriverStatus({
                driver_id: id,
                state: e
            }).then(res => {
                if (res.code == 0) {
                    this.$message.success(res.msg)
                }
            })
        },
        getList() {
            addrList().then(res => {
                console.log('res', res)
                this.isLoading = false;
                if (res.code == 0) {
                    this.list = res.data;
                }
            })
        },
    }
}
</script>
<style scoped>
.tag {
    cursor: pointer;
}
</style>